<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    	<link href="../css/chexing.css" rel="stylesheet" />
    	<link href="../css/indexlist.css" rel="stylesheet" />
    	<script src="../js/jquery-1.9.1.min.js"></script>
    	<style>
			html,
			body {
				height: 100%;
				/*overflow: hidden;*/
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
		</style>
	</head>

	<body>
		<!--  主题内容组件     -->
		<div class="mui-content">
			<!--  搜索框      -->
			<div class="sousuo">
				<div class="mui-indexed-list-search mui-input-row mui-search">
			    	<input id="inpt1" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="输入VIN码、品牌、车系搜索">
				</div>
			</div>
			
			<!-- div选项卡      -->
			<div class="mui-segmented-control">
			    <a class="mui-control-item mui-active" href="#item1">热门车系</a>
			    <a class="mui-control-item" href="#item2">全部车型</a>
			</div>
			
			<div style="overflow: hidden;" class="mui-content-padded">
				<!-- 热门车系      -->
				<div id="item1" class="mui-control-content mui-active">
					<!--<ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse mui-active">
				            <a class="mui-navigate-right a1" href="#">
				            	<img class="ig1" src="../img/chexing/dazhong.png"/>
				            	<span class="span1 sp1">大众</span>
				            </a>
				            <div class="mui-collapse-content">
			                	<div class="xiangxi_one">
			                		<a href="chexixiaji.html">上海大众 POLO</a>
			                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
			                	</div>
			                	<div class="xiangxi_one">
			                		<a href="chexixiaji.html">途安</a>
			                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
			                	</div>
				            </div>
				        </li>
				    </ul>
				    <ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right a1" href="#">
				            	<img class="ig2" src="../img/chexing/baoma.png"/>
				            	<span class="span1 sp2">宝马</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a href="chexixiaji.html">上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a href="chexixiaji.html">途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_one">
				                		<a href="chexixiaji.html">上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
				    <ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right a1" href="#">
				            	<img class="ig3" src="../img/chexing/fengtian.png"/>
				            	<span class="span1">丰田</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a href="chexixiaji.html">上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
				    <ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right" href="#">
				            	<img class="ig4" src="../img/chexing/xiandai.png"/>
				            	<span class="span1">现代</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a>上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
				    <ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right" href="#">
				            	<img class="ig5" src="../img/chexing/fute.png"/>
				            	<span class="span1">福特</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a>上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
				    <ul class="mui-table-view">
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right" href="#">
				            	<img class="ig6" src="../img/chexing/fengtian.png"/>
				            	<span class="span1">丰田</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a>上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>-->
				</div>
				<!-- 全部车型      -->
				<div  id="item2" class="mui-control-content">
					<div id='list' class="mui-indexed-list">
				
				<div style="display: none;" class="mui-indexed-list-search mui-input-row mui-search">
					 <input type="text" class="mui-input-clear mui-indexed-list-search-input" placeholder="请输入内容">
					<!--<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索城市">-->
				</div>
				
				
				<div style="background: none;" class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					
					<ul class="mui-table-view" id="ul_city">
						<li data-group="A" class="mui-table-view-divider mui-group-list-group">A</li>
						<ul class="mui-table-view"> 
					        <li class="mui-table-view-cell mui-collapse">
					            <a class="mui-navigate-right" href="#">
					            	<img class="ig6" src="../img/chexing/fengtian.png"/>
					            	<span class="span1">丰田</span>
					            </a>
					            <div class="mui-collapse-content">
					                <div class="xiangxi">
					                	<div class="xiangxi_one">
					                		<a>上海大众 POLO</a>
					                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
					                	</div>
					                	<div class="xiangxi_two">
					                		<a>途安</a>
					                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
					                	</div>
					                </div>
					            </div>
					        </li>
					    </ul>
						
					    
					    
					    
						<li data-group="B" class="mui-table-view-divider mui-group-list-group">B</li>
							<ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right" href="#">
				            	<img class="ig5" src="../img/chexing/fute.png"/>
				            	<span class="span1">福特</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a>上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
				    <ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right" href="#">
				            	<img class="ig6" src="../img/chexing/fengtian.png"/>
				            	<span class="span1">丰田</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a>上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
						<li data-group="C" class="mui-table-view-divider mui-group-list-group">C</li>
							<ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right" href="#">
				            	<img class="ig5" src="../img/chexing/fute.png"/>
				            	<span class="span1">福特</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a>上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
				    <ul class="mui-table-view"> 
				        <li class="mui-table-view-cell mui-collapse">
				            <a class="mui-navigate-right" href="#">
				            	<img class="ig6" src="../img/chexing/fengtian.png"/>
				            	<span class="span1">丰田</span>
				            </a>
				            <div class="mui-collapse-content">
				                <div class="xiangxi">
				                	<div class="xiangxi_one">
				                		<a>上海大众 POLO</a>
				                		<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                	<div class="xiangxi_two">
				                		<a>途安</a>
				                		<span style="color: #d5d5d5;" class="mui-icon mui-icon mui-icon-arrowright sp3"></span>
				                	</div>
				                </div>
				            </div>
				        </li>
				    </ul>
					</ul>
				</div>
			</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/indexlist.js"></script>
		<script>
			
		</script>
		<script type="text/javascript">
			mui.init()
			$(function(){
				$(".mui-collapse-content").children("xiangxi_one").addClass("two");
			});
			
//			alert($(".mui-collapse-content.all_content").children("xiangxi_one:even"))
			nav_tab();
	    	//底部导航栏点击跳转页面函数
	    	function nav_tab(){
	    		var nav = document.getElementById("nav");
		    	var nav_tab = nav.getElementsByClassName("mui-tab-item");
		    	for(var i=0;i<nav_tab.length;i++){
		    		(function(x){
		    			nav_tab[x].addEventListener('tap',function(){
					        window.location.href = this.href;
					    });
		    		})(i)
		    	}
	    	}
		</script>
		<script>
			mui.ready(function() {
				var header = document.querySelector('header.mui-bar');
				var list = document.getElementById('list');
				var done = document.getElementById('done');
				var nav=document.getElementById("nav");
				var ul_city=document.getElementById("ul_city");
				//calc hieght
//				list.style.height = (ul_city.offsetHeight - header.offsetHeight-nav.offsetHeight) + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
				//点击获取值
				var ul_city = document.getElementById('ul_city');
				ul_city.addEventListener("tap", function(e) {
					var tagClass = e.target.getAttribute("class");
					console.log("tagClass==" + tagClass);
					if (tagClass && tagClass.indexOf("mui-table-view-cell") != -1) {
						var selectCity = e.target.innerText;
						mui.alert("您选择的城市是" + selectCity);
					}
				});
			});
		</script>
		<script>
			$.getJSON("../json/chexing.json",function(data){
				var chexing1 ="";
				$.each(data,function(infoIndex,info){
					chexing1 +='<ul class="mui-table-view"> ';
					chexing1 +='<li class="mui-table-view-cell mui-collapse">';
					chexing1 +='<a class="mui-navigate-right a1" href="#">';
					chexing1 +='<img class="ig1" src=' + info.g_img_logo + '>';
					chexing1 +='<span class="span1 sp1">' + info.g_word + '</span>';
					chexing1 +='</a>';
					chexing1 +='<div class="mui-collapse-content">';
					var chexing1_xiaji="";
					console.log(info.remen_chexi_xiaji)
					$.each(info.remen_chexi_xiaji, function(index, data){
						chexing1_xiaji += '<a href=' + data.g_xiaji_href + '>';
                        chexing1_xiaji += '<div class="xiangxi_one">';
                        chexing1_xiaji += '<span class="sp10">' + data.g_xiaji_word + '</span>';
                        chexing1_xiaji += '<span class="mui-icon mui-icon mui-icon-arrowright sp3"></span>';
                        chexing1_xiaji += '</div>';
                        chexing1_xiaji += '</a>';
                    })
					chexing1 += chexing1_xiaji;
					chexing1 +='</div>';
					chexing1 +='</li></ul>';
		
				});
				$("#item1").append(chexing1);
//				$(".mui-collapse-content").children("xiangxi_one:odd").addClass("lastter");
				$(".mui-collapse-content > a .xiangxi_one:odd").addClass("lastter");
			});
		</script>
	</body>

</html>
